<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>FTTH工具仪表管理</title>
	
	<link rel="stylesheet" type="text/css" href="ui/style.css">	
    <link href="ui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="ui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="ui/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="ui/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="ui/common.js"></script>
    <script src="ui/plugins/jquery.watermarkinput.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js" defer="defer"></script>
	
	<script language="javascript" type="text/javascript">
	    $(document).ready(function () {	    	
	    	var area = '<s:property value="#session.user.role"  escape="false"/>';
	    	//alert(area);
	    	var url;
	        $("#grid").datagrid({
	            url: "Meter.action",
	            queryParams:{
	            	area:area,
	            	act:'list'
	            },
	            type: "post",
	            datatype: "json",
	            title:"FTTH工具仪表管理",
	            iconCls:"icon-meter",
	            border:false,
	            pageSize:20,
	            loadMsg: "数据加载中，请稍后...",
	            fitCloumns: false,
	            nowrap: false,
	            stripe:true,
	            fit: true,//自动大小
	            rownumbers:true,//行号
	            pagination: true,
	            singleSelect: true,	
	            toolbar:"#tb",            
			    frozenColumns:[[
                    { field: 'diqu', title: '区域', width:50}
			    ]]
	        });
	    });
	    function openDialog(dialog,act){
	    	if(act=='add'){
		    	$('#'+dialog).dialog('open').dialog('setTitle','添加工具仪表信息'); 
			    $( "#addForm" )[ 0 ].reset();
			    url = 'addMeter.action'; 
			}
			if(act=='edit'){
				var select = $('#grid').datagrid('getSelected');
				if(select){
					var row = $('#grid').datagrid('getSelected');  
					if (row){  
					    $('#'+dialog).dialog('open').dialog('setTitle','编辑工具仪表信息');  
					    $('#addForm').form('load',row);  
					    url = 'editMeter.action?id='+row.id;  
					}
				}else{
					$.messager.alert('请注意','请选择要编辑的行！','warning');
				}  
			}
	    }
	    function saveMeter(){
	    	//alert(url);  
		    $('#addForm').form('submit',{  
		        url: url, 		          
		        success: function(result){
		        	//alert(result);  
		            var result = eval('('+result+')');  
		            if (result.success){ 
		            	$.messager.show({  
		                    title: '信息',  
		                    msg: result.message  
		                }); 
		            	$('#addDialog').dialog('close');      // close the dialog  
		           		$('#grid').datagrid('reload');    // reload the user data  
		            } else {  
		                $.messager.show({  
		                    title: '信息',  
		                    msg: result.message  
		                });
		            }  
		        } 
		    });
		}
		
		function removeMeter(){  
		    var row = $('#grid').datagrid('getSelected');  
		    if (row){  
		        $.messager.confirm('确认','确定要删除这条信息吗？',function(r){  
		            if (r){  
		                $.post('removeMeter.action',{id:row.id},function(result){ 
		                	//alert(result.success);
		                	
		                    if (result.success){  
		                    	$.messager.show({   // show error message  
		                            title: '信息',  
		                            msg: result.message 
	                            }); 
		                        $('#grid').datagrid('reload');    // reload the user data  		                        
		                    } else {  
		                        $.messager.show({   // show error message  
		                            title: '信息',  
		                            msg: result.message  
		                        });  
		                    }  
		                },'json');  
		            }  
		        });  
		    }else{
				$.messager.alert('请注意','请选择要删除的行！','warning');
			}			 
		}
	    function resetForm(){
			$( "#addForm" )[ 0 ].reset();
		}
	    function GoEnterPage() {
	        var e = jQuery.Event("keydown");
	        e.keyCode = 13;
	        $("input.pagination-num").trigger(e);
	    }
	    $(function(){
			$('#exportMeterInfoDialog').dialog({				
				title:"导出到Excel",
				modal:true,
				closed:true
			});
		});
	    function ExportMeterInfo(){
			if($('#exportMeterInfoForm').form('validate')==true){
				$('#exportMeterInfoForm').submit();
				$('#exportMeterInfoDialog').dialog('close');
				//表单复位
				$( "#exportMeterInfoForm" )[ 0 ].reset();
				$.messager.show({  
	                title: '信息',  
	                msg: "正在导出，请稍候……"  
	            });
	        }else{
	        	$.messager.alert('请注意','请选择要导出的地区！','warning');
	        }
		}	
	</script>
	
  </head>
  
  <body runat="server">
    <table id="grid">
    	<thead>  
	        <tr>             
	            <th field="name" width="180">工具仪表名称</th>
	            <th field="quantity" width="50">数量</th>   
	            <th field="factory" width="150">厂家名称</th>  
	            <th field="model" width="100">型号</th>  
	            <th field="price" width="50">单价</th>  
	            <th field="buy_date" width="100">购置日期</th> 
	            <th field="buy_category" width="80">购买类别</th>  
	            <th field="note" width="150">备注</th> 
	        </tr>  
	    </thead>
    </table>
    <div id="tb">  
	    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:openDialog('addDialog','add');return false;">新增</a>  
	    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="javascript:openDialog('addDialog','edit');return false;">修改</a>
	    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:removeMeter();return false;">删除</a> 
	    <a href="#" class="easyui-linkbutton" iconCls="icon-excel" plain="true" onclick="javascript:$('#exportMeterInfoDialog').dialog('open');return false;">导出</a> 
	    <!--
	    <s:if test="%{#session.user.role=='全区'}">  
	    	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:removeRyxx();return false;">删除</a> 
	    </s:if>
	      
	    <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="javascript:openQueryDialog();return false;">查询</a>  
	    <a href="#" class="easyui-linkbutton" iconCls="icon-excel" plain="true" onclick="javascript:$('#exportDialog').dialog('open');return false;">导出</a> 
	    -->  
	</div> 
	<div id="addDialog" class="easyui-dialog" style="width:640px;height:250px;padding:10px 10px;overflow:hidden;margin:auto"  
        closed="true" buttons="#dlg-buttons"> 
	    <form id="addForm" method="post">  
	    	<table width="600px" border="0"  cellpadding="0" cellspacing="0">
	    	  <tr>
			    <td width="80px" height="40px"><div align="right"> <font color="red">*</font><label>区域：</label></div></td>
			    <td width="150px">				    		    	
			    	<select name="diqu" style="width:60%" class="easyui-validatebox" >
			    		<option value="" selected="selected">请选择</option>
			    		<s:if test="%{#session.user.role=='全区'}">
			    		<option value="市区">市区</option>
			    		<option value="亭湖">亭湖</option>
			    		<option value="盐都">盐都</option>
			    		<option value="东台">东台</option>
			    		<option value="大丰">大丰</option>
			    		<option value="射阳">射阳</option>
			    		<option value="建湖">建湖</option>
			    		<option value="阜宁">阜宁</option>
			    		<option value="滨海">滨海</option>
			    		<option value="响水">响水</option>
			    	</s:if>
			    	<s:else>
			    		<option value="<s:property value="#session.user.role" escape="false"/>"><s:property value="#session.user.role"   escape="false"/></option>
			    	</s:else>
			    	</select>
			    </td>
			    <td width="100px"><div align="right"><font color="red">*</font> <label>工具仪表名称：</label></div></td>
			    <td width="140px">
			    	<input type="text" name="name" style="width:100%" class="easyui-validatebox" >
				</td>
				<td width="50px"><div align="right"><label>数量：</label></div></td>
			    <td colspan="2" width="80px">
			    	<input type="text" name="quantity" style="width:100%" class="easyui-validatebox" >
				</td>			   
			  </tr>
			  
			  <tr>
			    <td  height="40px"><div align="right"> <font color="red">*</font><label>厂家名称：</label></div></td>
			    <td>				    		    	
			    	<input type="text" name="factory" style="width:100%" class="easyui-validatebox" >
			    </td>
			    <td ><div align="right"><font color="red">*</font> <label>型号：</label></div></td>
			    <td >
			    	<input type="text" name="model" style="width:100%" class="easyui-validatebox" >
				</td>
				<td ><div align="right"><label>单价：</label></div></td>
			    <td colspan="2">
			    	<input type="text" name="price" style="width:100%" class="easyui-validatebox" >
				</td>			   
			  </tr>
			  
			  <tr>
			    <td  height="40px"><div align="right"> <font color="red">*</font><label>购置日期：</label></div></td>
			    <td >				    		    	
			    	<input name="buy_date" style="width:100%" onClick="WdatePicker({dateFmt:'yyyy/M/d',startDate:'2010/1/1',errDealMode:'2'})" class="easyui-validatebox Wdate" />
			    </td>
			    <td ><div align="right"><font color="red">*</font> <label>购买类别：</label></div></td>
			    <td >
			    	<select name="buy_category" style="width:80%" class="easyui-validatebox" >
			    		<option value="" selected="selected">请选择</option>
			    		<option>统一配置</option>
			    		<option>自购</option>
			    	</select>
				</td>
				<td >&nbsp;</td>
			    <td >
			    	&nbsp;
				</td>			   
			  </tr>
			  
			  <tr>
			    <td  height="40px"><div align="right"> <font color="red">*</font><label>备注：</label></div></td>
			    <td colspan="5">				    		    	
			    	<input type="text" name="note" style="width:100%" class="easyui-validatebox" >
				</td>			   
			  </tr>
			  
	    	</table>
	    </form>	     
	</div>
	<div id="dlg-buttons">    
	    <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="javascript:resetForm();return false;">重置</a> 
	    <a href="#" id="btnSave" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveMeter();return false;">保存</a> 
	</div>
	
	<div id="exportMeterInfoDialog" icon="icon-excel" style="padding:5px;width:350px;height:150px;">
		<div style="height:20px;line-height:20px;MARGIN-RIGHT:auto;MARGIN-LEFT:auto;vertical-align:middle;text-align:center;margin-top:40px;">
			<form action="ExportMeterInfo" method="post" id="exportMeterInfoForm">
				<font color="red">*</font>
				<select name="area" style="width:150px" class="easyui-validatebox" >
		    		<option value="" selected="selected">请选择地区</option>
		    		<s:if test="%{#session.user.role=='全区'}">
		    		<option value="全区">全区</option>
		    		<option value="市区">市区</option>
		    		<option value="亭湖">亭湖</option>
		    		<option value="盐都">盐都</option>
		    		<option value="东台">东台</option>
		    		<option value="大丰">大丰</option>
		    		<option value="射阳">射阳</option>
		    		<option value="建湖">建湖</option>
		    		<option value="阜宁">阜宁</option>
		    		<option value="滨海">滨海</option>
		    		<option value="响水">响水</option>
		    	</s:if>
		    	<s:else>
		    		<option value="<s:property value="#session.user.role" escape="false"/>"><s:property value="#session.user.role"   escape="false"/></option>
		    	</s:else>
		    	</select>&nbsp;&nbsp;<a href="#" class="easyui-linkbutton" id="btnExport" onclick="javascript:ExportMeterInfo();return false;">导出</a>
	    	</form>
    	</div>
	</div>
  </body>
</html>
